<template>
	<div class='tinymce'>
		<editor id='tinymce' v-model.trim='tinymceHtml' :init='init'></editor>
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce'
	import 'tinymce/themes/silver/theme'
	import Editor from '@tinymce/tinymce-vue'
	import 'tinymce/plugins/image'
	import 'tinymce/plugins/link'
	import 'tinymce/plugins/code'
	import 'tinymce/plugins/table'
	import 'tinymce/plugins/lists'
	import 'tinymce/plugins/contextmenu'
	import 'tinymce/plugins/wordcount'
	import 'tinymce/plugins/colorpicker'
	import 'tinymce/plugins/textcolor'
	import 'tinymce/skins/ui/oxide/skin.css'
	import 'tinymce/icons/default/icons.min.js'

	export default {
		name: 'tinymce',
		components: {Editor},
		data() {
			return {
				init: {
					language_url: '/static/tinymce/zh_CN.js',
					language: 'zh_CN',
					skin_url: '/static/tinymce/skins/lightgray',
					height: 300,
					plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
					toolbar:
						'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
					branding: false
				}
			}
		},
		props: {
			tinymceHtml: String
		},
		model: {
			prop: 'tinymceHtml',
			event: 'change'
		},
		watch: {
			tinymceHtml(newVal, oldVal) {
				this.$emit('change', newVal)
			}
		},
		mounted() {
			tinymce.init({})
		}
	}
</script>

<style>
</style>
